在初步了解HTML語法後，接下來要開始針對元件進入美化(渲染)，與之配合的程式語言，即為CSS。
大部分的CSS語法，都是跟視覺感官設計相關的操作，諸如著色、字體大小、粗體、元件大小、外框、排版等，除了少部分視覺效果，如排版，需要一些時間去了解，其餘如美觀設計，從語法名稱結果，直觀上相當容易理解其效果，差異只在於初學不知道有那些效果可以使用，此問題基本都可以直接詢問ChatGPT解決，或者直接到w3schools查詢，也可了解全貌。
但是當提到CSS，不得不提及的就是選擇器(selector)，它是用來特定、選擇你想要美化或設計HTML中元件的語法，是學習CSS必要優先熟悉的語法。
1. 基本選擇器
基本選擇器，選擇的語法相當直觀，在初次看到，應能馬上理解該語法效果，熟悉與否差別，主要體現在選擇器的命名與管理，後面將另外討論
| 選擇器類型 | 語法範例 | 說明 |
|---|---|---|
| 元件選擇器(element selector) | div |
直接以元件名稱進行選擇 |
| 類別選擇器(class selector) | .class |
以class進行選擇 |
| ID選擇器(id selector) | #id |
以id進行選擇 |
| 群組選擇器(grouping selector) | div, p |
以逗號( , )，分隔各選擇器，同時選擇列舉的元件 |
2. 組合選擇器(combinator)
組合選擇器，是我一開始接觸CSS語法，直觀上最沒辦法直接了解其選擇的效果，透過多次試誤才總算發現，原來兩元件之間的空白( )竟然是一種選擇器！這種是初學者，也不知道是問題的問題，完全不覺得需要問ChatGPT，但就是花很多時間在選擇的試誤上，不如就直接列出組合選擇器的選擇效果，是最省時的學習方法。
| 選擇器類型 | 語法範例 | 說明 |
|---|---|---|
| 後代組合選擇器(descendant combinator) (space) | div p |
選取所有的子層元件，會選取div元件的子元件中(不管多少層)，所有的p元件 |
| 子組合選擇器(child combinator) (>) | div > p |
選取單一層子層元件，會選取div元件的子元件中(限定第一個子層中)，所有的p元件 |
| 相鄰兄弟組合選擇器(next sibling combinator) (+) | div + p |
所謂的兄弟層，是指位於同階層的元件，選取同階層的元件中，相鄰其後的第一個元件 |
| 通用兄弟組合選擇器(subsequent-sibling combinator) (~) | div ~ p |
選取同階層的元件中，位於其後的所有元件(不限於相鄰其後的第一個) |
3. 偽類選擇器(pseudo-class)
偽類選擇器，是根據網頁使用者滑鼠的動作，以進行相對應的美化反映，增加與使用者的互動性，是相當實用的選擇方式。以單冒號( : )對元件進行後綴。
| 偽類選擇器 | 說明 |
|---|---|
a:link |
未拜訪過的連結，第一次看到的超連結 |
a:visited |
已拜訪過的連結，經滑鼠點過後的連結 |
a:hover |
滑鼠移過去時，懸停在該元件上時 |
a:active |
滑鼠點擊當下，點擊按下的那一瞬間，即該元件受到聚焦時 |
:link或:visited → :hover → :active
另外，就表格(<tr>, <td>)或清單(<li>)元件，如果要針對特定的列、欄、條項進行選擇，以下的偽類選擇器相當好用
| 偽類選擇器 | 說明 |
|---|---|
:first-child |
選擇父層的第一個子元件 |
:last-child |
選擇父層的最後一個子元件 |
:nth-child(n) |
分別代表選擇父層的第n個子元件 |
:nth-child(even) |
分別代表選擇父層的第偶數個子元件 |
:nth-child(odd) |
分別代表選擇父層的第奇數個子元件 |
4. 偽元件選擇器(pseudo-element)
偽元件選擇器，主要是選擇元件的特定部分，並進行美化，或者針對元件的前後插入內容，以冒號( :: )對元件進行後綴
| 偽元件選擇器 | 說明 |
|---|---|
::first-line |
樣式化段落的第一行文字，如 p::first-line { color: red; } |
::first-letter |
樣式化段落的第一個字母，如 p::first-letter { font-size: 2em; } |
::before |
在元件前方插入內容，如 h1::before { content: '📌'; } |
::after |
在元件後方插入內容，如 h1::after { content: '✔'; } |
::marker |
樣式化<li>的符號( • )，如 li::marker { color: blue; } |
::selection |
使用者反白選取區域的樣式，如 ::selection { background: yellow; } |
iThome鐵人賽
看影片追技術
看更多